<template>
    <div class="radio-box" v-if="this.isEdit" :class="{ shake: this.questionBoxShake }">

        <div class="content-box" v-if="this.topic != 'text'">
            <div class="question-title">
                <label for="" class="input-title">{{this.titles[0].label}}</label>
                <input type="text" :value="this.titles[0].message" @input="updateQuestionTitle"
                    :class="{ shake: isShake && isTitleEmpty && this.topic != 'text', remind: isCorrect && isTitleEmpty && this.topic != 'text'}"
                    @focus="outlineRemove" @blur="titleEmpty">
            </div>
            <div class="question-title">
                <label for="" class="input-title">{{this.titles[1].label}}</label>
                <input type="text" :value="this.titles[1].message" @input="updateQuestionRemark">
            </div>
        </div>

        <textarea maxlength="180" class="description"
            :class="{ shake: isShake && isTextEmpty && this.topic == 'text', remind: isCorrect && isTextEmpty && this.topic == 'text' }"
            :value="text" @input="updateText" @focus="outlineRemove" @blur="textEmpty" v-else>
        </textarea>

        <hr />

        <div class="selectbox">
            <select name="" id="" :value="topic" @change="updateTopic">
                <option value="radio">单选题</option>
                <option value="checkbox">多选题</option>
                <option value="input">文本题</option>
                <option value="text">文本描述</option>
            </select>

            <input type="checkbox" id="required" v-if="this.topic != 'text'" :checked="isRequired"
                @change="updateIsRequired">
            <label for="required" v-if="this.topic != 'text'">必填</label>
        </div>

        <div class="options-box" v-if="this.topic == 'radio' || this.topic == 'checkbox'">
            <div class="option" v-for="(option, index) in options" :key="option.id"
                :class="{ shake: isShake && this.options[index].isEmpty }">
                <input type="text" v-model="option.message" @blur="empty(index)" @input="updateOption(index)">
                <div class="close" @click="deleteOptions(index)">
                    <img src="../../assets/close.png" alt="">
                </div>
            </div>
            <div class="addoption" @click="addOptions">新建选项</div>
        </div>

        <div class="btn-box">
            <div class="sure" @click="sureQuestion">确定</div>
        </div>
    </div>

    <div class="show-box" v-else>
        <div class="show-title" v-if="this.topic != 'text'">
            <div>
                {{questionIndex}}.{{this.titles[0].message}}
            </div>

            <div v-if="this.titles[1].message">
                {{this.titles[1].message}}
            </div>
        </div>

        <div class="show-text" v-else>
            {{this.text}}
        </div>

        <div class="show-options" v-if="this.topic == 'radio' || this.topic == 'checkbox'">
            <div class="show-radio" v-for="(option, index) in options" :key="option.id">
                <input :type="this.topic" name="option" :id="index" disabled>
                <label :for="index">{{option.message}}</label>
            </div>
        </div>

        <div class="show-input" v-if="this.topic == 'input'">
            <input type="text" name="" id="" disabled>
        </div>

        <div class="edit-box">
            <div class="show-btn" @click="editQuestion" v-if="this.topic != 'text'" title="编辑">
                <img src="../../assets/edit.png" alt="">
            </div>
            <div class="show-btn" @click="deleteQuestion" title="删除">
                <img src="../../assets/delete.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../store'
    import {
        cover
    } from '@/util/apis'
    export default {
        store,
        props: ['index'],
        data() {
            return {
                isShake: false,
                isCorrect: false,
                isTitleEmpty: true,
                isTextEmpty: true,
            }
        },
        created(){
            console.log(store.state.question)
        },
        methods: {
            deleteOptions(index) {
                store.commit('deleteOption', {
                    optionsIndex: index,
                    questionsIndex: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            addOptions() {
                store.commit('addOption', {
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            updateOption(index) {
                store.commit('updateOption', {
                    optionsIndex: index,
                    index: this.index,
                    id: sessionStorage.getItem('index'),
                    value: this.options[index].message
                })
                console.log(this.options[index].message)
            },
            sureQuestion() {
                let hasEmpty = false
                for (let i = 0; i < this.options.length; i++) {
                    if (this.options[i].isEmpty) {
                        hasEmpty = true
                    }
                    if(this.topic == 'radio' || this.topic == 'checkbox'){
                        for(let z = this.options.length - 1; z > i ; z--) {
                            if(this.options[i].message == this.options[z].message) {
                                alert('选项内容不能重复')
                                return -1
                            }
                        }
                    }
                }
                if ((this.titles[0].message && !hasEmpty && (this.topic == 'radio' || this.topic == 'checkbox')) || (
                        this.text && this.topic == 'text') || (this.titles[0].message && this.topic == 'input')) {
                    store.state.question[sessionStorage.getItem('index')].questions[this.index].isEdit = ''
                    let params = {
                        username: sessionStorage.getItem('username'),
                        questions: store.state.question[sessionStorage.getItem('index')].questions,
                        index:sessionStorage.getItem('index')
                    }
                    console.log(params)
                    cover(params).then((response) => {
                        console.log(response)
                    }).catch((error) => {
                        console.log(error)
                    })
                } else {
                    this.isCorrect = true
                    this.isShake = true
                    setTimeout(() => {
                        this.isShake = false
                    }, 500)
                }
            },
            editQuestion() {
                let hasEdit = false
                for (let i = 0; i < store.state.question[sessionStorage.getItem('index')].questions.length; i++) {
                    if (store.state.question[sessionStorage.getItem('index')].questions[i].isEdit) {
                        hasEdit = true
                    }
                }
                if (!hasEdit) {
                    store.state.question[sessionStorage.getItem('index')].questions[this.index].isEdit = true
                }
            },
            deleteQuestion() {
                store.commit('deleteQuestion', {
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
                let params = {
                    username: sessionStorage.getItem('username'),
                    questions: store.state.question[sessionStorage.getItem('index')].questions,
                    index:sessionStorage.getItem('index')
                }
                cover(params).then((response) => {
                    console.log(response)
                }).catch((error) => {
                    console.log(error)
                })
            },
            outlineRemove() {
                this.isCorrect = false
            },
            empty(index) {
                if (!this.options[index].message) {
                    this.options[index].isEmpty = true
                } else {
                    this.options[index].isEmpty = ''
                }
            },
            titleEmpty() {
                if (this.titles[0].message && this.topic != 'text') {
                    this.isTitleEmpty = false
                } else {
                    this.isTitleEmpty = true
                }
            },
            textEmpty() {
                if (this.text && this.topic == 'text') {
                    this.isTextEmpty = false
                } else {
                    this.isTextEmpty = true
                }
            },
            updateTopic(e) {
                store.commit('updateTopic', {
                    value: e.target.value,
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            updateText(e) {
                store.commit('updateText', {
                    value: e.target.value,
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            updateQuestionTitle(e) {
                store.commit('updateQuestionTitle', {
                    value: e.target.value,
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            updateQuestionRemark(e) {
                store.commit('updateQuestionRemark', {
                    value: e.target.value,
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            },
            updateIsRequired(e) {
                store.commit('updateIsRequired', {
                    value: e.target.checked,
                    index: this.index,
                    id: sessionStorage.getItem('index')
                })
            }
        },
        computed: {
            options() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].options
            },
            isEdit() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].isEdit
            },
            questionBoxShake() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].questionBoxShake
            },
            topic() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].type
            },
            text() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].text
            },
            isRequired() {
                return store.state.question[sessionStorage.getItem('index')].questions[this.index].required
            },
            titles() {
                return [{
                        label: '题目',
                        message: store.state.question[sessionStorage.getItem('index')].questions[this.index].title
                    },
                    {
                        label: '备注',
                        message: store.state.question[sessionStorage.getItem('index')].questions[this.index].remark
                    }
                ]
            },
            questionIndex() {
                let qIndex = this.index + 1
                for (let i = 0; i < this.index; i++) {
                    if (store.state.question[sessionStorage.getItem('index')].questions[i].type == 'text') {
                        qIndex = qIndex - 1
                    }
                }
                return qIndex
            },
            questionnaireIndex(){
                return sessionStorage.getItem('index')
            }

        }
    }
</script>

<style scoped>
    hr {
        position: relative;
        width: 120%;
        margin-top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    input {
        outline: none;
        border: none;
    }

    textarea {
        outline: none;
    }

    .remind {
        outline: 1px solid red;
    }

    .show-box {
        position: relative;
        width: 100%;
        min-height: 60px;
        padding: 20px 100px 10px;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        overflow: hidden;
    }

    .show-box:hover {
        background-color: #fafafa;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .show-title {
        width: 100%;
        min-height: 30px;
    }

    .show-title>div:nth-child(1) {
        width: 100%;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        font-size: .9rem;
        text-align: left;
    }

    .show-title>div:nth-child(1)>span {
        color: red;
    }

    .show-title>div:nth-child(2) {
        width: 100%;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        font-size: .8rem;
        text-align: left;
    }

    .show-input {
        width: 100%;
        min-height: 60px;
        margin: 10px 20px 20px;
    }

    .show-input>input {
        display: block;
        width: 100%;
        height: 30px;
        padding: 0 20px;
        background-color: #fff;
        line-height: 30px;
        text-align: left;
        border: 1px solid #e0e0e0;
    }

    .show-options {
        width: 100%;
        min-height: 60px;
        margin: 10px 0 20px;
    }

    .show-radio {
        display: block;
        width: 100%;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        text-align: left;
    }

    .show-radio>input {
        vertical-align: middle;
    }

    .show-radio>label {
        height: 30px;
        margin-left: 5px;
        font-size: .9rem;
        vertical-align: middle;
    }

    .show-text {
        width: 100%;
        padding: 0 20px;
        font-size: .9rem;
        text-align: left;
    }

    .edit-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 60px;
        height: 100%;
        top: 0;
        right: -60px;
        border-left: 1px solid #e0e0e0;
        background-color: #4187f6;
        transition: all .3s;
    }

    .edit-box img {
        display: block;
        position: relative;
        width: 26px;
        height: 26px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
    }

    .show-btn {
        width: 100%;
        height: 40px;
        font-size: 1rem;
        cursor: pointer;
    }

    .show-btn:hover {
        background-color: #2b343b;
    }

    .show-box:hover .edit-box {
        right: 0;
    }

    .radio-box {
        width: 100%;
        min-width: 600px;
        min-height: 250px;
        padding: 20px 100px 10px;
        background-color: #fafafa;
        overflow: hidden;
    }

    .content-box {
        width: 100%;
        height: 92px;
    }

    .question-title {
        position: relative;
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .input-title {
        float: left;
        width: 10%;
        height: 36px;
        line-height: 36px;
        font-size: 1rem;
    }

    .question-title>input {
        display: block;
        position: relative;
        width: 90%;
        height: 100%;
        float: right;
        padding: 0 10px;
        border: 1px solid #e0e0e0;
    }

    .description {
        display: block;
        position: relative;
        width: 90%;
        height: 92px;
        margin: 0 auto;
        padding: 10px 10px;
        border: 1px solid #e0e0e0;
        font-size: .9rem;
        resize: none;
    }

    .options-box {
        position: relative;
        width: 70%;
        left: 8%;
        margin: 0 20px;
        padding: 10px 10px 0;
    }

    .option {
        position: relative;
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
        font-size: 1rem;
    }

    .addoption {
        position: relative;
        width: 94%;
        height: 36px;
        font-size: 1rem;
        text-align: center;
        line-height: 36px;
        border: 1px dashed #000;
        cursor: pointer;
    }

    .option>input {
        display: block;
        width: 94%;
        height: 100%;
        float: left;
        padding: 0 10px;
        border: 1px solid #e0e0e0;
    }

    .close {
        position: relative;
        width: 14px;
        height: 14px;
        top: 50%;
        right: 1%;
        transform: translateY(-50%);
        float: right;
        cursor: pointer;
        transition: transform .3s;
    }

    .close:hover {
        transform: translateY(-50%) rotate(180deg);
    }

    .close>img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-box {
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 20px;
    }

    .sure {
        position: relative;
        width: 70px;
        height: 100%;
        float: right;
        line-height: 40px;
        font-size: 1.2rem;
        background-color: #4187f6;
        color: #fff;
        cursor: pointer;
    }

    .selectbox {
        position: relative;
        width: 100%;
        height: 40px;
        margin: 10px 0;
        line-height: 40px;
    }

    .selectbox>select {
        display: block;
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        background-color: #fff;
        border-radius: 2px;
        outline: none;
    }

    .selectbox input[type='checkbox'] {
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 50%;
        left: 150px;
        transform: translateY(-50%);
    }

    .selectbox label {
        display: block;
        position: absolute;
        width: 100px;
        height: 16px;
        left: 132px;
        line-height: 40px;
        font-size: .8rem;
        user-select: none;
    }

    .shake {
        animation: shake .5s;
    }

    @keyframes shake {

        10%,
        90% {
            transform: translateX(-1px);
        }

        20%,
        80% {
            transform: translateX(2px);
        }

        30%,
        50%,
        70% {
            transform: translateX(-3px);
        }

        40%,
        60% {
            transform: translateX(3px);
        }
    }
</style>